<template>
	<view class="asset-container">
		<!-- 搜索区域 -->
		<view class="search-section">
			<view class="search-box">
				<input 
					type="text"
					v-model="searchText"
					placeholder="请输入资产名称"
					class="search-input"
					@input="onSearch"
				/>
				<image 
					v-if="searchText"
					src="/static/images/clear.svg" 
					class="clear-icon" 
					mode="aspectFit"
					@tap="clearSearch"
				></image>
			</view>
		</view>

		<!-- 列表区域 -->
		<scroll-view 
			class="asset-scroll"
			scroll-y="true"
			@scrolltolower="loadMore"
			@refresherrefresh="onRefresh"
			:refresher-enabled="true"
			:refresher-triggered="isRefreshing"
		>
			<!-- 空状态 -->
			<view v-if="assetList.length === 0 && !isLoading" class="empty-state">
				<image 
					src="/static/images/no-data.svg" 
					mode="aspectFit" 
					class="empty-image"
				></image>
				<text class="empty-text">暂无资产数据</text>
			</view>

			<!-- 资产列表 -->
			<view v-else class="asset-list">
				<view 
					class="asset-card" 
					v-for="(asset, index) in assetList" 
					:key="index"
					@tap="goToDetail(asset)"
				>
					<view class="card-content">
						<view class="header-row">
							<text class="asset-name">{{ asset.name || '' }}</text>
							<text class="create-time">{{ formatTime(asset.createdTime) }}</text>
						</view>
						
						<view class="info-row">
							<text class="type-text">{{ asset.type || '' }}</text>
							<text class="label-text">{{ asset.label || '' }}</text>
						</view>
						
						<view class="customer-row">
							<text class="customer-text">{{ asset.customerTitle || '' }}</text>
							<view class="circle-arrow">
								<image src="/static/images/arrow-right-2.svg" mode="aspectFit" class="arrow-icon"></image>
							</view>
						</view>
					</view>
				</view>

				<!-- 加载状态 -->
				<view v-if="isLoading" class="loading-more">
					<text>加载中...</text>
				</view>

				<!-- 无更多数据 -->
				<view v-if="!hasMore && assetList.length > 0" class="no-more">
					<text>没有更多数据了</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import request from '@/utils/request.js'
import { formatTime } from '@/utils/timeUtils.js'

export default {
	data() {
		return {
			assetList: [],
			page: 0,
			pageSize: 10,
			hasMore: true,
			isLoading: false,
			isRefreshing: false,
			searchText: '',
			searchTimer: null
		}
	},

	onLoad() {
		this.fetchAssets()
	},

	methods: {
		formatTime,

		// 获取资产列表
		async fetchAssets(isRefresh = false) {
			if (this.isLoading) return

			try {
				this.isLoading = true
				const params = {
					pageSize: this.pageSize,
					page: this.page,
					textSearch: this.searchText,
					sortProperty: 'createdTime',
					sortOrder: 'DESC',
					assetProfileId: ''
				}

				const result = await request.get('/api/tenant/assetInfos', params)
				
				if (result && result.data) {
					if (isRefresh) {
						this.assetList = result.data
					} else {
						this.assetList = [...this.assetList, ...result.data]
					}
					this.hasMore = result.hasNext || false
				}
			} catch (error) {
				console.error('获取资产列表失败：', error)
				uni.showToast({
					title: '获取资产列表失败',
					icon: 'none'
				})
			} finally {
				this.isLoading = false
				if (isRefresh) {
					this.isRefreshing = false
					uni.stopPullDownRefresh()
				}
			}
		},

		// 搜索处理
		onSearch() {
			if (this.searchTimer) {
				clearTimeout(this.searchTimer)
			}
			this.searchTimer = setTimeout(() => {
				this.page = 0
				this.assetList = []
				this.hasMore = true
				this.fetchAssets(true)
			}, 300)
		},

		// 清除搜索
		clearSearch() {
			this.searchText = ''
			this.onSearch()
		},

		// 下拉刷新
		async onRefresh() {
			if (this.isRefreshing || this.isLoading) return
			this.isRefreshing = true
			this.page = 0
			await this.fetchAssets(true)
		},

		// 加载更多
		async loadMore() {
			if (!this.hasMore || this.isLoading || this.isRefreshing) return
			this.page++
			await this.fetchAssets()
		},

		// 跳转到详情页
		goToDetail(asset) {
			uni.navigateTo({
				url: '/pages/more/asset/assetDetail?id=' + asset.id.id,
				success: function(res) {
					res.eventChannel.emit('assetData', { data: asset })
				}
			})
		}
	}
}
</script>

<style>
.asset-container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.search-section {
	background-color: #fff;
	padding: 12rpx 20rpx 10rpx;
}

.search-box {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	padding: 12rpx 20rpx;
	position: relative;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
	padding-right: 60rpx;
}

.clear-icon {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
}

.asset-scroll {
	height: calc(100vh - 90rpx);
}

.asset-list {
	padding: 16rpx 20rpx;
}

.asset-card {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-content {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.asset-name {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
}

.create-time {
	font-size: 28rpx;
	color: #999;
}

.info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.type-text,
.label-text {
	font-size: 26rpx;
	color: #666;
}

.customer-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.customer-text {
	font-size: 26rpx;
	color: #666;
}

.circle-arrow {
	width: 56rpx;
	height: 56rpx;
	border-radius: 50%;
	background-color: #F3F5F8;
	display: flex;
	align-items: center;
	justify-content: center;
}

.arrow-icon {
	width: 32rpx;
	height: 32rpx;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.empty-image {
	width: 240rpx;
	height: 240rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.loading-more, 
.no-more {
	text-align: center;
	padding: 30rpx 0;
	color: #999;
	font-size: 24rpx;
}
</style>
